<template>
  <div class="app-container">

    <u-page title="呈报扣款项目维护">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="扣款名称" prop="deductname">
            <el-input v-model="listQuery.deductname" placeholder="请输入扣款名称" style="width: 280px" clearable />
          </el-form-item>
          <el-form-item label="选择类型" prop="choosetype">
            <el-select v-model="listQuery.choosetype" placeholder="请选择选择类型"  clearable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" style="margin-left: 20px" @click="handleAddAdInfo">新增</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <!--  弹窗 -->
    <el-drawer
      title="新增"
      :visible.sync="adinfotable"
      direction="rtl"
      size="60%"
    >
      <div style="margin-top: 5px;padding-left: 10px">
        <el-form ref="adformrules" :model="adform" :rules="adformrules">
          <el-row>
            <el-form-item label="扣款名称" prop="deductname">
              <el-input v-model="adform.deductname" autocomplete="off" style="width: 200px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="单位" prop="deductunit">
              <el-input v-model="adform.deductunit" autocomplete="off" style="width: 200px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="adform.remark" autocomplete="off" style="width: 200px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否分单价" prop="ifunit">
              <el-radio-group v-model="adform.ifunit">
                <el-radio label="是"  />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row v-if="adform.ifunit === '是'">
            <el-form-item label="单价单位" prop="djunit">
              <el-input v-model="adform.djunit" autocomplete="off" style="width: 300px" />
            </el-form-item>
          </el-row>
          <el-row v-if="adform.ifunit === '是'">
            <el-form-item label="费用单位" prop="fyunit">
              <el-input v-model="adform.fyunit" autocomplete="off" style="width: 300px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="数据类型" prop="datatype">
              <el-radio-group v-model="adform.datatype">
                <el-radio label="number">数字</el-radio>
                <el-radio label="percent">百分比</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="默认日期" prop="defaultdate">
              每月<el-input v-model="adform.defaultdate" type="number" autocomplete="off" style="width: 80px" />号
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="扣费计算" prop="computetype">
              <el-radio-group v-model="adform.computetype">
                <el-radio label="1">整月计算</el-radio>
                <el-radio label="2">半月计算</el-radio>
                <el-radio label="3">按日计算</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="选择类型" prop="choosetype">
              <el-radio-group v-model="adform.choosetype">
                <el-radio label="固定" />
                <el-radio label="自选" />
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="adform.status">
                <el-radio label="启用" />
                <el-radio label="停用" />
              </el-radio-group>
            </el-form-item>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="onSave('adformrules')">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.ContractDeduct,
      dataapi: this.$u.api.ContractApply,
      typeList: [{ value: '固定', label: '固定' }, { value: '自选', label: '自选' }],
      // 楼层
      adinfotable: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      updateflag: false,
      listLoading: false,
      list: [],
      adform: {
        updateflag: false,
        deductname: '',
        deductunit: '',
        djunit: '',
        fyunit: '',
        choosetype: '',
        status: '',
        xkname: '',
        zkname: '',
        defaultdate: '',
        ifunit: '',
        datatype: '',
        computetype: ''
      },
      formLabelWidth: '80px',
      // 表格
      columns: [
        {
          prop: 'deductname',
          label: '扣款名称'
        },
        {
          prop: 'djunit',
          label: '单价单位'
        },
        {
          prop: 'fyunit',
          label: '费用单位'
        },
        {
          prop: 'choosetype',
          label: '选择类型'
        },
        {
          prop: 'status',
          label: '状态'
        },
        {
          prop: 'defaultdate',
          label: '默认日期'
        }
      ],
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        deductname: ''
      },
      // 规则
      adformrules: {
        deductname: [
          { required: true, message: '请填写扣款名称', trigger: 'blur' }
        ],
        choosetype: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getFloors()
  },
  methods: {
    // 加载楼层
    getFloors() {
      const self = this
      self.dataapi.floors().then(res => {
        this.floors = res.data
      })
    },
    handleAddAdInfo() {
      const self = this
      self.adform.updateflag = false
      self.adinfotable = true
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    },
    handleFilter() {
      this.hdlFilter()
    },
    // 保存
    onSave(formName) {
      const self = this
      // 表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过验证进行提交动作
          self.api.save(self.adform).then(res => {
            // 通知信息
            self.$u.msg(res.msg)
          }).catch(() => {
            return
          })
        } else {
          return false
        }
      })
    },
    // 编辑
    handleEdit(row) {
      const self = this
      self.adform = row
      self.adinfotable = true
      self.adform.updateflag = true
    },
    // 删除
    handleDelete(row) {
      const self = this
      self.api.delete(row.id).then(res => {
        // 通知信息
        self.$u.msg('删除成功！')
        this.hdlFilter()
      }).catch(() => {
        self.$u.msg('删除失败，请重试或联系管理员')
        return
      })
    },
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
}
</style>
